<template>
    <el-row class="login w100 h100">
        <div class="content h100">
            <div class="form-content">
                <!-- 登录进行的错误提示：账号不存在或者密码输错 -->
                <h2 style="color: white;text-align: center; margin-top: 200px; margin-left: 30px;">小区物联网平台</h2>
                <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" label-width="55px"
                    :hide-required-asterisk="true">

                    <el-row type="flex">
                        <el-form-item prop="username">

                            <template #label>
                                <div class="label-row">
                                    <span :class="['label']">账号</span>
                                </div>
                            </template>


                        </el-form-item>

                        <el-input ref="usernameRef" v-model="loginForm.username"></el-input>
                    </el-row>

                    <el-row type="flex">
                        <el-form-item prop="password">
                            <template #label>
                                <div class="label-row">
                                    <span :class="['label']">密码</span>
                                </div>
                            </template>

                        </el-form-item>
                        <el-input ref="passwordRef" v-model="loginForm.password" type="password"></el-input>
                    </el-row>

                    <el-form-item>
                        <!-- type=button必须有不然会有闪退 因为form里的button默认是type="submit" 会触发刷新页面闪退(emmm)-->
                        <el-button class="loginBtn" @click="handleLogin" type="primary">登录</el-button>
                    </el-form-item>

                </el-form>



            </div>

        </div>

    </el-row>
</template>

<script>
import { setToken } from "@/utils/cookie.js";
import { login } from "@/api/person.js"

export default {
    name: "Login",
    data() {
        return {
            loginForm: {
                username: undefined,
                password: undefined,
            },


            //登录校验
            loginRules: {
                username: [{
                    //该输入框是必填项
                    required: true,
                    //提示语
                    message: "请输入账号",
                    //触发校验的事件：失焦时触发
                    trigger: "blur",
                }],
                password: [{
                    required: true,
                    message: "请输入密码",
                    trigger: "blur",
                }],
            },



        }
    },

    created() {

    },

    methods: {
        /*点击登录 */
        handleLogin() {
            //对整个表单进行校验
            this.$refs[`loginFormRef`].validate((valid) => {


                if (!valid) return
                login({ ...this.loginForm }).then(res => {
                    this.$message.success(res.msg)

                    //存储token
                    setToken(res.data)
                    this.$router.push('/home')
                }).catch(err => {
                    console.log(err);
                })

            })
        }
    }

}

</script>

<style lang="scss" scoped>
.login {
    background-color: #2d3a4b;
    height: 100vh;

    .content {
        .form-content {

            width: 600px;
            margin: auto;

            .label-row {
                span {
                    &.label {
                        color: white
                    }
                }

            }

            .el-form {
                .el-form-item {
                    .loginBtn {
                        width: 545px;
                        height: 40px;
                        border-radius: 3px 3px;
                        border-style: none;
                        margin-top: 10px;
                        cursor: pointer;
                    }
                }
            }

        }
    }
}
</style>